<template>
  <div class="content wrapper">
    <div class="recomment-template">
      <div class="upload-survey">
        <div class="import-entry">
          <div class="import-content-left">
            <div class="content-left-pic"></div>
            <span class="content-left-text">从EXCEL导入数据，并自动生成问卷</span>
          </div>
          <div class="import-content-right">
            <button class="buttom-start">开始</button>
          </div>
        </div>
      </div>
      <h2 class="reconmmend">为您推荐</h2>
      <div class="row">
        <div class="column-left">
          <a class="list-1" >
            <div class="line">
              <i class="order">1</i>
              <span class="title">身体健康状况调查</span>
            </div>
            <span class="ext">20个问题/3页</span>
          </a>
          <a class="list-1">
            <div class="line">
              <i class="order">2</i>
              <span class="title">学生身体健康状况调查</span>
            </div>
            <span class="ext">26个问题/3页</span>
          </a>
          <a class="list-1">
            <div class="line">
              <i class="order">3</i>
              <span class="title">教师身体健康状况调查</span>
            </div>
            <span class="ext">24个问题/3页</span>
          </a>
          <a class="list-1">
            <div class="line">
              <i class="order order-other">4</i>
              <span class="title">中小学师生健康调查表</span>
            </div>
            <span class="ext">24个问题/2页</span>
          </a>
          <a class="list-1">
            <div class="line">
              <i class="order order-other">5</i>
              <span class="title">xx市中小学师生健康调查表</span>
            </div>
            <span class="ext">6个问题/1页</span>
          </a>
        </div>
        <div class="column-right">
          <a class="list-1">
            <div class="line">
              <i class="order order-other">6</i>
              <span class="title">社交网站满意度问卷模板</span>
            </div>
            <span class="ext">34个问题/5页</span>
          </a>
          <a class="list-1">
            <div class="line">
              <i class="order order-other">7</i>
              <span class="title">购物网用户满意度调查</span>
            </div>
            <span class="ext">21个问题/1页</span>
          </a>
          <a class="list-1">
            <div class="line">
              <i class="order order-other">8</i>
              <span class="title">数码家电类产品满意度模板</span>
            </div>
            <span class="ext">32个问题/4页</span>
          </a>
          <a class="list-1">
            <div class="line">
              <i class="order order-other">9</i>
              <span class="title">网购消费者的行为习惯调查</span>
            </div>
            <span class="ext">28个问题/4页</span>
          </a>
          <a class="list-1">
            <div class="line">
              <i class="order order-other">10</i>
              <span class="title">餐饮类团购用户满意度调查模板</span>
            </div>
            <span class="ext">31个问题/3页</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

};
</script>

<style lang="scss" scoped>
.content {
  margin-left: auto;
  margin-top: 40px;
  padding: 0 20px;
}
.recomment-template {
  width: 1223px;
  height: 329px;
  font-size: 12px;
  line-height: 1.5;
}
.upload-survey {
  width: 1223px;
  height: 70px;
}
.import-entry {
  height: 70px;
  background-color: #f4f6f9;
  vertical-align: middle;
  padding: 0 20px;
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
}
.import-content-left {
  height: 70px;
  width: 339px;
  display: flex;
  align-items: center;
  position: relative;
  box-sizing: border-box;
}
.content-left-pic {
  background-image: url("../assets/table.svg");
  width: 24px;
  height: 19px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.content-left-text {
  width: 305px;
  height: 24px;
  margin-left: 40px;
  font-size: 20px;
  color: #333;
  box-sizing: border-box;
  white-space: nowrap;
}
.import-content-right {
  height: 70px;
  width: 100px;
  display: flex;
  position: relative;
}
.buttom-start {
  width: 100px;
  height: 36px;
  background-color: #008fff;
  font-size: 14px;
  color: #fff;
  padding: 10px 15px;
  border: 1px solid #e1e7f2;
  border-radius: 4px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.reconmmend {
  font-size: 20px;
  font-weight: normal;
  line-height: 1;
  border-bottom: 1px solid #d9d9d9;
  margin: 40px 0 0;
  padding-bottom: 13px;
}
.row {
  height: 185px;
  // background-color: bisque;
  padding: 10px 0 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-count: 10;
}
.column-left {
  width: 423px;
  height: 175px;
  // background-color: rgb(209, 235, 184);
  margin: 0 94px 0 0;
  // box-sizing: border-box;
}
.column-right {
  width: 423px;
  height: 175px;
  // margin: 0 94px 0 0;
  // background-color: darkorchid;
}
.list-1 {
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
  // padding-right: 200px;
}
.order {
  margin-right: 10px;
  color: #3da6ff;
  font-size: 14px;
}
.order-other {
  color: #333;
}
.title {
  font-size: 16px;
}

.ext {
  font-size: 14px;
  color: #999999;
}
.list-1:hover {
  color: #58a6e7;
}
</style>
